import React from "react";
import {Image, TextInput, View} from "react-native";
import {TextInputPropTypes} from 'deprecated-react-native-prop-types';

import PropTypes from "prop-types";

class ImageInput extends React.PureComponent {

  static propTypes = {
    leftImageSource: PropTypes.oneOfType([
      PropTypes.shape({
        uri: PropTypes.string,
        headers: PropTypes.objectOf(PropTypes.string)
      }),
      // Opaque type returned by require('./image.jpg')
      PropTypes.number,
      // Multiple sources
      PropTypes.arrayOf(
          PropTypes.shape({
            uri: PropTypes.string,
            width: PropTypes.number,
            height: PropTypes.number,
            headers: PropTypes.objectOf(PropTypes.string)
          })
      )
    ]),
    leftImageStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
    placeholder: PropTypes.string,
    inputStyle: TextInputPropTypes.style,
    value: PropTypes.string,
    editable: PropTypes.bool,
    onChangeText: PropTypes.func,
    keyboardType: PropTypes.string,
    rightView: PropTypes.object,
    secureTextEntry: PropTypes.bool
  };


  render() {
    const {style} = {...this.props};
    const viewStyle = [
      style,
      {
        flexDirection: "row",
        alignItems: "center",
        paddingRight: 5,
        paddingTop: 0,
        paddingLeft: 5,
        paddingBottom: 0,
        borderBottomWidth: 1,
        borderBottomColor: "#d7d7d7"
      }
    ];
    let inputStyle = [this.props.inputStyle, {flex: 1, borderWidth: 0}];
    return <View {...this.props} style={viewStyle}>
      <Image source={this.props.leftImageSource} style={this.props.leftImageStyle}/>
      <TextInput placeholder={this.props.placeholder} style={inputStyle} clearButtonMode='while-editing'
                 value={this.props.value} onChangeText={this.props.onChangeText}
                 secureTextEntry={this.props.secureTextEntry}/>
      {this.props.rightView}
    </View>;
  }
}

export default ImageInput;
